<template>
  <el-dialog append-to-body class="common_dialog" custom-class="reset-dialog-width" :visible.sync="visible" :title="!queryParams.id ?'添加配置项' : '修改配置项'" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="form" :rules="dataRule" ref="form" label-width="120px">
      <el-form-item label="变量标题" prop="title">
        <el-input v-model="form.title" placeholder="请输入变量标题" />
      </el-form-item>
      <el-form-item label="变量名" prop="name">
        <el-input v-model="form.name" placeholder="请输入变量名" :disabled="queryParams.id ? true : false"/>
      </el-form-item>
      <el-form-item label="变量值" prop="value">
        <el-input v-model="form.value" placeholder="请输入变量值" />
      </el-form-item>
      <el-form-item label="分组" prop="group">
        <el-input v-model="form.group" placeholder="请输入分组" />
      </el-form-item>
      <el-form-item label="变量描述" prop="tip">
        <el-input v-model="form.tip" placeholder="请输入变量描述" />
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button :loading="confirmLoading" type="primary" @click="formSubmitHandle()">确 定</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </template>
  </el-dialog>
</template>

<script>

import debounce from 'lodash/debounce'
import { ntconfigSava, getNtconfig } from "@/api/basic/jkconfig"

export default {
  data() {
    return {
      visible: false,
      form: {
        id: null,
        title: '',
        name: '',
        value: '',
        group: '',
        tip: '',
      },
      confirmLoading: false,
      queryParams: {}
    }
  },
  components: {
  },
  computed: {
    dataRule() {
      return {
      }

    }
  },
  methods: {
    init() {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['form'].resetFields()
        this.reset()
        this.confirmLoading = false
        this.form.id = this.queryParams.id ? this.queryParams.id : ''
        this.queryParams.id ? this.getInfo() : ''
      })
    },
    // 重置表单
    reset() {
      this.form = {
        id: null,
        title: '',
        name: '',
        value: '',
        group: '',
        tip: '',
      };
    },
    // 获取信息
    getInfo() {
      const id = this.queryParams.id
      getNtconfig(id).then(response => {
         this.form = response.data
      });
    },
    // 表单提交
    formSubmitHandle: debounce(function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.confirmLoading = true
          ntconfigSava(this.form).then(response => {
            this.$modal.msgSuccess("操作成功");
            this.visible = false
            this.confirmLoading = false
            this.$emit('refreshDataList')
          }).catch(() => {
            this.confirmLoading = false
          });
        }
      })
    }, 1000, { 'leading': true, 'trailing': false }),

  }
}
</script>
<style lang="scss" scoped>
</style>
